<template>
  <div class="card">
    <ul>
      <li v-for="(item,index) in treeData" :key="index">
        <div class="item " :class="{'line-left':index!==0,'line-right':index!=treeData.length-1}">
          <!-- 提交 -->
          <div class="item-name" :class="{'line-bottom':item.child&&item.child.length>0,'line-top':!treeFirst}">
            <div v-if="!treeFirst" class="reduce" @click="delChild(index)">-</div>
            <div v-if="type == 5" class="where-node where-error">
              <div class="where-title">
                <span>条件1</span>
                <em>优先级1</em>
              </div>
              <div class="where-con">
                <span>请设置条件</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
            <div class="submit-container" v-else :class="type == 1 || type == 6 ? 'gray-color' : type == 2 ? 'orage-color' : type == 4 ? 'zi-color' : type == 3 ? 'blue-color' : ''">
              <span class="submit-title">
                提交
              </span>
              <div class="submit-con">
                <p class="more1-ellipsis">提交人: 总经办、高艳芬</p>
                <p class="more1-ellipsis">抄送人：直属上级</p>
              </div>
            </div>
            <el-tooltip placement="right" popper-class="color-fff">
              <div slot="content" class="type-con">
                <div class="node-type">
                  <img src="https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/department-avatar.png" alt="">
                  <p>审批人</p>
                </div>
                <div class="node-type">
                  <img src="https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/department-avatar.png" alt="">
                  <p>审批人</p>
                </div>
                <div class="node-type">
                  <img src="https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/department-avatar.png" alt="">
                  <p>审批人</p>
                </div>
                <div class="node-type">
                  <img src="https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/department-avatar.png" alt="">
                  <p>审批人</p>
                </div>
              </div>
              <div class="plus" @click="addChild(index)">+</div>
            </el-tooltip>
          </div>
        </div>
        <tree-item v-if="item.child&&item.child.length>0" :tree-data="item.child" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeItem',
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    treeFirst: { //判断是否第一个
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      type: 5
    }
  },
  created() {

  },
  methods: {
    // 添加子元素
    addChild(index) {
      if (this.treeData[index].child) {
        this.treeData[index].child.push({ name: '1' })
      } else {
        this.$set(this.treeData[index], 'child', [{ 'name': '1' }])
      }
    },
    // 删除子元素
    delChild(index) {
      this.treeData.splice(index, 1)
    }
  }
}
</script>
<style>
.color-fff.el-tooltip__popper.is-dark {
  background: #fff !important;
  box-shadow: 0 4px 16px 12px rgba(56, 73, 69, 0.11);
}
.color-fff .popper__arrow {
  border-right-color: white !important;
}
.color-fff .popper__arrow::after {
  border-right-color: white !important;
}
</style>
<style lang="scss" scoped>
$line-length: 20px; //线长
$spacing: 20px; //间距
$extend: calc(#{$spacing} + 2px); //延长线

// 线样式
@mixin line {
  content: "";
  display: block;
  width: 1px;
  height: $line-length;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background: #c2c5cc;
}
// 线样式
@mixin chuantou-line {
  content: "";
  display: block;
  width: 1px;
  height: 55px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background: #c2c5cc;
}
// 加减号icon
@mixin icon {
  position: absolute;
  border-radius: 100%;
  bottom: -5px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #666;
  z-index: 100;
  cursor: pointer;
  margin: 0;
  padding: 0;
  background-color: white;
  color: #37f;
  filter: drop-shadow(0 4px 8px rgba(31, 35, 41, 0.1));
  // opacity: 0;
  &:hover {
    border: 1px solid #37f;
  }
}
.more1-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.type-con {
  background-color: #fff;
  display: flex;
  align-items: center;
  border-radius: 5px;
  z-index: 1;
  position: relative;
  .node-type {
    flex: 1;
    padding: 15px 15px;
    cursor: pointer;
    &:hover {
      background-color: #edeeee;
    }
    img {
      display: block;
      margin: 0 auto;
      width: 48px;
      height: 48px;
    }
    p {
      margin: 0;
      text-align: center;
      margin-top: 5px;
      font-size: 14px;
      color: #333;
    }
  }
}
.card {
  background-color: #f0f0f2;
  ul {
    display: flex;
    justify-content: center;
    li {
      .where-node {
        width: 200px;
        background-color: white;
        margin-bottom: 30px;
        margin-top: 35px;
        border-radius: 10px;
        &.where-error {
          border: 1px solid #ff5b4c;
          box-shadow: 0 0 3px 0 #ff5b4c;
        }
        .where-title {
          color: #2eb795;
          padding: 6px 14px;
          font-size: 12px;
          border-bottom: 1px solid #f6f6f7;
          
          em {
            float: right;
            font-style: normal;
          }
        }
        .where-con {
          display: flex;
          align-items: center;
          padding: 8px 14px;
          span {
            font-size: 14px;
            color: #999;
            display: block;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden; //溢出内容隐藏
            text-overflow: ellipsis; //文本溢出部分用省略号表示
            display: -webkit-box; //特别显示模式
            -webkit-line-clamp: 2; //行数
            line-clamp: 2;
            -webkit-box-orient: vertical; //盒子中内容竖直排列
          }
          i {
            margin-left: auto;
          }
        }
      }
      .submit-container {
        height: 88px;
        width: 200px;
        border-radius: 10px;
        text-align: left;
        margin-bottom: 30px;
        margin-top: 35px;
        &.gray-color {
          background-color: #a9b4cd;
        }
        &.orage-color {
          background-color: #f80;
        }
        .submit-title {
          margin-left: 5px;
          color: #fff;
          font-size: 14px;
          padding-top: 5px;
          display: inline-block;
          margin-left: 14px;
        }
        .submit-con {
          margin: 5px 4px 4px 4px;
          background-color: white;
          padding: 7px 6px 7px 7px;
          font-size: 14px;
          border-radius: 5px;
          p {
            width: 175px;
            margin: 0;
          }
        }
      }

      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        &-name {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 5px;
          margin: $spacing;
          .plus {
            @include icon();
            &:hover {
              opacity: 100%;
            }
          }
          .reduce {
            @include icon();
            top: -5px;
            &:hover {
              opacity: 100%;
            }
          }
        }
      }
    }
  }
  // 向下的线
  .line-bottom {
    &::after {
      @include chuantou-line();
      bottom: -$line-length;
    }
  }
  // 向上的线
  .line-top {
    &::before {
      @include line();
      height: 60px;
      top: -$line-length;
    }
  }
  // 向左的线
  .line-left {
    &::after {
      @include line();
      width: calc(50% + #{$spacing});
      height: 1px;
      left: calc(-50% - #{$extend});
      top: 0;
    }
  }
  // 向右的线
  .line-right {
    &::before {
      @include line();
      width: calc(50% + #{$spacing});
      height: 1px;
      right: calc(-50% - #{$extend});
      top: 0;
    }
  }
}
</style>
